<template>
    <div class="content-warp">
        <ul class="content2">
            <li>
                <p class="commonP"><span id="commonSpan" class="resource"></span>资源介绍</p>
            </li>
            <li v-for="(item,index) in arr" :key="index">
                <p><img src="../../assets/img/APP矩阵详情页/切图通用/13.png"><span>{{item}}</span></p>
            </li>
        </ul>
        <ul class="content2 content-style">
            <li>
                <p class="commonP"><span id="commonSpan" class="advantage"></span>产品优势</p>
            </li>
            <li v-for="(item,index) in arr1" :key="index">
                <p><img src="../../assets/img/APP矩阵详情页/切图通用/13.png"><span>{{item}}</span></p>
            </li>
        </ul>
        <div class="content2 container3">
            <p class="commonP"><span id="commonSpan" class="show-presentation"></span>展现形式</p>
            <ul class="content3">
                <li>
                    <img :src="arr2[0]" alt="">
                    <p>{{arr3[0]}}</p>
                </li>
                <li>
                    <img :src="arr2[1]" alt="">
                    <p>{{arr3[1]}}</p>
                </li>
                <li>
                    <img :src="arr2[2]" alt="">
                    <p>{{arr3[2]}}</p>
                </li>
            </ul>
        </div>
        <div class="container4">
            <p class="commonP"><span id="commonSpan" class="sale-presentation"></span>售卖方式</p>
            <p><img src="../../assets/img/APP矩阵详情页/切图通用/13.png"><span>{{result1.sellingWay}}</span></p>
        </div>
        <!-- <div class="container5">
            <button>点击查看更多APP</button>
        </div> -->
    </div>
</template>
<script>
export default {
  data() {
    return {
      liIndex: 0,
      type: "",
      result1: "",
      id: "",
      arr: [],
      result: "",
      arr1: [],
      arr2: [],
      arr3: []
    };
  },
  methods: {},
  mounted() {
    if (this.$route.query.type) {
      this.type = this.$route.query.type;
      // 获取logo
      this.$ajax
        .post(
          this.Ipurl +
            "advertisingInformation/getNamesByType" +
            "?type=" +
            this.type
        )
        .then(res => {
          // 默认读取第一个
          this.result = res.data.dataInfo;
          this.id = this.result[0].id;
          this.$ajax
            .post(
              this.Ipurl + "advertisingInformation/queryById" + "?id=" + this.id
            )
            .then(res => {
              this.result1 = res.data.dataInfo;
              // console.log(this.result1);

              // 拆分得到的字符串结果
              this.arr = this.result1.introduce.split("&");
              this.arr1 = this.result1.advantage.split("&");
              this.arr2 = this.result1.showImage.split(";");
              this.arr3 = this.result1.showContent.split(";");
            });
        });
    } else {
      this.type = "DSP";
      this.$ajax
        .post(
          this.Ipurl +
            "advertisingInformation/getNamesByType" +
            "?type=" +
            this.type
        )
        .then(res => {
          // 默认读取第一个
          this.result = res.data.dataInfo;
          this.id = this.result[0].id;
          this.$ajax
            .post(
              this.Ipurl + "advertisingInformation/queryById" + "?id=" + this.id
            )
            .then(res => {
              this.result1 = res.data.dataInfo;
              // console.log(this.result1);

              // 拆分得到的字符串结果
              this.arr = this.result1.introduce.split("&");
              this.arr1 = this.result1.advantage.split("&");
              this.arr2 = this.result1.showImage.split(";");
              this.arr3 = this.result1.showContent.split(";");
            });
        });
    }
  }
};
</script>
<style scoped>
.content-warp{
  position: relative;
  padding:7px;
}
.content2 {
  background: #fff;
  margin-top: 30px;
  overflow: hidden;
  box-shadow:2px 2px 20px #EBEBEB;
}
.content-style{
  background:#f8f9fd;
   box-shadow:none;
   margin-top:30px;
}
.content1 {
  background: #fff;
  box-shadow: 3px 3px 3px 3px #f8f9fd;
}
.content2 > li:last-child {
  margin-bottom: 40px;
}
.content2 > li > p {
  margin-top: 40px;
  margin-left: 60px;
  font-size: 18px;
}
.content2 > li:nth-child(1) > p {
  font-size: 24px;
  font-weight: bold;
}
.content2 > li > p > span {
  margin-left: 20px;
}
/* .container3 {
  box-shadow: 3px 3px 3px 3px #f8f9fd;
  overflow: hidden;
  margin-top: 30px;
} */
.container3 > p {
  font-size: 24px;
  font-weight: bold;
  margin-top: 40px;
  margin-left: 60px;
}
.container3 > ul.content3 {
  margin-top: 40px;
}
.container3 > ul.content3 > li {
  width:390px;
  text-align: center;
  float: left;
}
.container3 > ul.content3 > li > p {
  font-size: 16px;
  margin-top: 20px;
  font-weight: bold;
  margin-bottom: 40px;
}
.container4 {
  background: #f8f9fd;
  margin-top: 30px;
  overflow: hidden;
  margin-bottom: 80px;
}
.container4 > p:nth-child(1) {
  font-size: 24px;
  font-weight: bold;
  margin-top: 40px;
  margin-left: 60px;
}
.container4 > p:nth-child(2) {
  margin-top: 40px;
  margin-left: 60px;
  font-size: 18px;
}
.container4 > p:nth-child(2) > span {
  margin-left: 20px;
}
.container4 > p:last-child {
  margin-bottom: 40px;
}


#commonSpan {
  display: inline-block;
  width: 22px;
  height: 22px;
  padding-right: 35px;
  margin-left: 0;
}

.resource {
  background: url('../../assets/img/APP矩阵详情页/切图通用/64.png') no-repeat;
  vertical-align: -13%;
}
.advantage {
  background: url('../../assets/img/APP矩阵详情页/切图通用/65.png') no-repeat;
  vertical-align: -13%;
}
.show-presentation {
  background: url('../../assets/img/APP矩阵详情页/切图通用/66.png') no-repeat;
  vertical-align: -11%;
}
.sale-presentation {
  background: url('../../assets/img/APP矩阵详情页/切图通用/67.png') no-repeat;
  vertical-align: -5%;
}
</style>